<template>
	<view>
		<u-navbar placeholder fixed autoBack border title="考勤管理"></u-navbar>

		<view class="d-p-30">
			<view class="card d-p-30">
				<view class="d-flex">
					<text class="d-font-32" style="font-weight: bold;">{{ nowDate }}月汇总</text>
				</view>

				<view class="d-flex d-text-center d-m-t-30">
					<view class="d-flex-1" style="color: #162233;">
						<view>
							<text style="font-size: 52rpx;font-weight: bold;">{{ count ? count.staffs : 0 }}</text>
						</view>
						<text class="d-font-24">实名总人数</text>
					</view>
					<view class="d-flex-1" style="color: #162233;">
						<view>
							<text style="font-size: 52rpx;font-weight: bold;">{{ count ? count.staffs : 0 }}</text>
						</view>
						<text class="d-font-24">进场总人数</text>
					</view>
					<view class="d-flex-1" style="color: #162233;">
						<view>
							<text style="font-size: 52rpx;font-weight: bold;">{{ count ? count.unatdStaffs : 0 }}</text>
						</view>
						<text class="d-font-24">缺勤总人数</text>
					</view>
				</view>
			</view>

			<view class="card d-p-30 d-m-t-30" style="padding-top: 0!important;"><calendar @onDayClick="setNowDateYMD" :open="false" disabledAfter></calendar></view>

			<view class="card d-p-30 d-m-t-30">
				<view class="d-flex">
					<text class="d-font-32" style="font-weight: bold;">{{ nowDataYMD }}日统计</text>
				</view>

				<view class="d-flex d-text-center d-m-t-30">
					<view class="d-flex-1" style="color: #162233;">
						<view>
							<text style="font-size: 52rpx;font-weight: bold;">{{ dayCount ? dayCount.staffs : 0 }}</text>
						</view>
						<text class="d-font-24">实名总人数</text>
					</view>
					<view class="d-flex-1" style="color: #162233;">
						<view>
							<text style="font-size: 52rpx;font-weight: bold;">{{ dayCount ? dayCount.staffs : 0 }}</text>
						</view>
						<text class="d-font-24">进场总人数</text>
					</view>
					<view class="d-flex-1" style="color: #162233;">
						<view>
							<text style="font-size: 52rpx;font-weight: bold;">{{ dayCount ? dayCount.unatdStaffs : 0 }}</text>
						</view>
						<text class="d-font-24">缺勤总人数</text>
					</view>
				</view>
			</view>

			<view class="card d-p-30 d-m-t-30">
				<view class="table d-text-center">
					<view class="tr">
						<view class="th">班组名称</view>
						<view class="th">考勤</view>
						<view class="th">出勤</view>
						<view class="th">缺勤</view>
					</view>
					<view class="tr" v-for="(item, index) in list" :key="index" @click="workGroupDetail(item)">
						<view class="td u-line-1" style="max-width: 200rpx;">{{ item.bzmc }}</view>
						<view class="td">{{ item.zrs }}</view>
						<view class="td">{{ item.cqrs }}</view>
						<view class="td">{{ item.qqrs }}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import calendar from './calendar.vue';
import { regionAtdDetail, bzkqStatistics } from '../../../common/api.js';
export default {
	components: {
		calendar
	},
	data() {
		return {
			gcbh: null,
			nowDate: null,
			count: null,
			nowDataYMD: null,
			dayCount: null,
			pageNum: 1,
			pageSize: 20,
			pageLast: 1,
			list: [],
		};
	},
	onLoad(e) {
		this.gcbh = e.gcbh;
		this.nowDate = this.$moment().format('YYYY-MM');
		this.nowDataYMD = this.$moment().format('YYYY-MM-DD');
		this.init();
	},
	onReachBottom() {
		if (this.pageNum < this.pageLast) {
			++this.pageNum;
			this.getList().then(e => {
				this.list = this.list.concat(e.data);
			});
		}
	},
	methods: {
		init() {
			regionAtdDetail({
				params: {
					id: this.gcbh,
					deptId: this.$user.deptId,
					kqrq: this.nowDate
				}
			}).then(e => {
				this.count = e.data;
			});
			this.getDayData();

			this.pageNum = 1;
			this.getList().then(e => {
				this.list = e.data;
				this.pageLast = Math.ceil(e.total / this.pageSize);
			});
		},
		getDayData() {
			regionAtdDetail({
				params: {
					id: this.gcbh,
					deptId: this.$user.deptId,
					kqrq: this.nowDataYMD
				}
			}).then(e => {
				this.dayCount = e.data;
			});
		},
		getList() {
			return bzkqStatistics({
				params: {
					deptId: this.$user.deptId,
					pageSize: this.pageSize,
					gcbh: this.gcbh,
					pageNum: this.pageNum
				}
			});
		},
		setNowDateYMD(e) {
			this.nowDataYMD = e.date;
			this.getDayData();
		},
		workGroupDetail(item) {
			uni.$u.route({
				url: '/pages/index/work/workGroupDetail',
				params: {
					id: item.id,
					gcbh: item.gcbh,
				}
			});
		}
	}
};
</script>

<style lang="scss">
page {
	background-color: #fbfcfc;
}
.card {
	box-shadow: 0rpx 5rpx 10rpx rgba(0, 0, 0, 0.05);
	border-radius: 10rpx;
	background-color: #ffffff;

	.table {
		font-size: 28rpx;
		display: table;
		width: 100%;
		vertical-align: middle;
		border: 1px solid #f6f7f8;
		.tr {
			display: table-row;
			.th,
			.td {
				display: table-cell;
				height: 80rpx;
				vertical-align: middle;
			}
			.th {
				font-weight: bold;
				color: #162233;
			}
			&:nth-child(2n-1) {
				background-color: #f6f7f8;
			}
		}
	}
}
</style>
